<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="school-setting.css" type="text/css"/>
    <!--图片上传-->
    <link href="../../../lib/cropper-4.0.0/cropper.min.css" rel="stylesheet">
    <link href="../../../lib/cropper-4.0.0/sitelogo.css" rel="stylesheet">
    <title>学校信息设置</title>
</head>
<body class="pb-30">
<div class="container-fluid pt-10">
    <div id="left">
        <form id="schoolInfo" class="center-block f-18">
            <div class="form-group">
                <label for="schoolName">学校名称</label>
                <input type="text" id="schoolName" class="form-control" name="name">
            </div>
            <div>
                <label>学校LOGO</label>
                <div class="img-preview logo-preview bk-gray size-MINI radius">
                    <img id="result" src="" alt="logo图片">
                </div>
                <!--上传本地图片-->
                <!--
                <div id="btn-logo">
                    <label for="#updateLogo" class="btn btn-block b-666 c-white mt-15">上传本地图片</label>
                    <input id="#updateLogo" type="file" class="hide" name="logo">
                </div>-->

               <div id="btn-logo">
                   <div class="btn btn-block b-666 c-white mt-15">上传本地图片</div>
               </div>
            </div>

            <div class="mt-30 mb-15">
                <label>登录背景</label>
                <div class="img-preview background-preview bk-gray size-MINI radius">
                    <img src="" alt="背景图片">
                </div>
                <div class="mt-5 f-12">建议尺寸：1920*1000px</div>
                <div id="btn-background" class="mt-5"></div>
            </div>
            <div class="clearfix">
                <a href="javascript:void(0);" class="preview btn-preview btn b-333 c-white f-l">预览</a>
                <a href="javascript:void(0);" class="preview btn-submit btn b-333 c-white f-r">确定</a>
            </div>
        </form>
    </div>

    <div id="right">
        <div class="f-18">效果预览</div>
        <header class="b-333 pos-r mt-5 mb-5">
            <div class="pos-middle c-white">
                <a class="preview-logo">
                    <img>
                    <span class="school-name"></span>
                </a>
            </div>
        </header>
        <div class="content">
            <iframe id="preview" src="preview.html"></iframe>
        </div>
    </div>
</div>

<!-- image upload model -->
<div class="modal fade in" id="avatar-modal" aria-hidden="false" aria-labelledby="avatar-modal-label" role="dialog"
     tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput" style="line-height: 35px;">图片上传</label>
                            <label for="avatarInput" class="btn btn-danger">
                                <span>请选择图片</span>
                                <input class="avatar-input hide" id="avatarInput" name="avatar_file" type="file">
                            </label>
                            <span id="avatar-name"></span>
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <!-- 图片预览 -->
                                <div class="avatar-wrapper"><img id="photo" src="" alt=""></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-4">
                                <div class="btn-group">
                                    <button class="btn btn-danger fa fa-undo" data-method="rotate" data-option="-90"
                                            type="button" title="Rotate -90 degrees"> 向左旋转
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn  btn-danger fa fa-repeat" data-method="rotate" data-option="90"
                                            type="button" title="Rotate 90 degrees"> 向右旋转
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-danger fa fa-arrows"
                                        data-method="setDragMode"
                                        data-option="move" type="button" title="移动">
                                        <span class="docs-tooltip"
                                              data-toggle="tooltip"
                                              title=""
                                              data-original-title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
                                        </span>
                                </button>

                                <button type="button" class="btn btn-danger fa fa-search-plus"
                                        data-method="zoom"
                                        data-option="0.1" title="放大图片">
                                        <span class="docs-tooltip"
                                              data-toggle="tooltip"
                                              title="" data-original-title="$().cropper(&quot;zoom&quot;, 0.1)">
                                        </span>
                                </button>

                                <button type="button" class="btn btn-danger fa fa-search-minus"
                                        data-method="zoom"
                                        data-option="-0.1" title="缩小图片">
                                        <span class="docs-tooltip"
                                              data-toggle="tooltip"
                                              title="" data-original-title="$().cropper(&quot;zoom&quot;, -0.1)">
                                        </span>
                                </button>

                                <button type="button" class="btn btn-danger fa fa-refresh"
                                        data-method="reset"
                                        title="重置图片">
                                        <span class="docs-tooltip"
                                              data-toggle="tooltip" title=""
                                              data-original-title="$().cropper(&quot;reset&quot;)"
                                              aria-describedby="tooltip866214">
                                        </span>
                                </button>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-danger btn-block avatar-save fa fa-save" type="button"
                                        data-dismiss="modal"> 保存修改
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>

<script src="../../../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../lib/cropper-4.0.0/cropper.min.js"></script>
<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function SchoolSetting() {
            this.getSchoolData();
            this.clickEvent();
            this.submitEvent();
            this.initCropper($('#photo'),$('#avatarInput'));
        }

        SchoolSetting.prototype = {
            base64:"",
            clickEvent: function () {
                var _this = this;

                /*
                var a = new T.updateImg({
                    imgEle: ".logo-preview",
                    btnEle: "#btn-logo",
                    btnId: "#updateLogo",
                    btnText: "上传本地图片",
                    inputName: "logo",
                    // updateCb:_this.preview.bind(_this)
                });
                var b = new T.updateImg({
                    imgEle: ".background-preview",
                    btnEle: "#btn-background",
                    btnId: "#updateBackground",
                    btnText: "上传本地图片",
                    inputName: "image",
                    // updateCb:_this.preview.bind(_this)
                });*/
                // 上传图片
                $('#btn-logo').on("click",function (){
                    $('.modal').modal('toggle');
                });
                $(".avatar-save").on("click", function () {
                    _this.crop();
                });

                // preview
                $(".btn-preview").on("click", function () {
                    _this.preview();
                });
            },
            getSchoolData: function () {
                var _this = this;
                T.ajaxSecret(url_join("school/school/show"), "post", {id: 18}, function (res) {
                    console.log("学校信息: ", res);
                    $("#schoolName").val(res.data.name);
                    $(".logo-preview img").attr("src", res.data.logo ? url_join(res.data.logo) : "../../../img/not-update.png");
                    $(".background-preview img").attr("src", res.data.image ? url_join(res.data.image) : "../../../img/not-update.png");
                    _this.preview(res);
                });
            },
            preview: function (res) {
                var _this = this;
                // right
                if (res) {
                    $(".school-name").text(res.data.name);
                    $(".preview-logo img").attr("src", url_join("") + res.data.logo);
                } else {
                    $(".preview-logo img").attr("src", $(".logo-preview img").attr("src"));
                }

                var logoSrc = $(".logo-preview img").attr("src");
                var bgSrc = $(".background-preview img").attr("src");

                T.saveSession("schoolPreview", {
                    name: $("#schoolName").val(),
                    logo: /not\-update\.png/.test(logoSrc) ? "" : logoSrc,
                    background: /not\-update\.png/.test(bgSrc) ? "" : bgSrc
                });
                document.getElementById('preview').contentWindow.location.reload(true);
            },
            submitEvent: function () {
                var _this = this;

                $(".btn-submit").on("click", function (e) {
                    var form = document.getElementById("schoolInfo");

                    // 开发阶段,临时使用
                    var _school_id = localStorage.getItem("schoolId");
                    var school_id = localStorage.getItem("schoolId");

                    $(form).append($("<input type='hidden' name='_school_id' value='" + _school_id + "'>"));
                    $(form).append($("<input type='hidden' name='school_id' value='" + school_id + "'>"));

                    // var data = new FormData(form);
                    var data = $(form).serializeObject();
                    data.logo = _this.base64;

                    T.ajaxImg(url_join("school/school/update"), "post", data, function (e) {
                        console.log(e);
                        T.jumpLogin("操作成功,是否重新登录让修改生效?");
                        // layer.msg("操作成功", {icon: 1});
                        _this.preview();
                    });
                });
                return false;
            },
            initCropper: function (img, input) {
                var _this = this;
                var $image = img;
                var options = {
                    aspectRatio: 1, // 纵横比
                    viewMode: 2,
                    preview: '#imageHead' // 预览图的class名
                };
                $image.cropper(options);
                var $inputImage = input;
                var uploadedImageURL;
                if (URL) {
                    // 给input添加监听
                    $inputImage.change(function () {
                        var files = this.files;
                        var file;
                        if (!$image.data('cropper')) {
                            return;
                        }
                        if (files && files.length) {
                            file = files[0];
                            // 判断是否是图像文件
                            if (/^image\/\w+$/.test(file.type)) {
                                // 如果URL已存在就先释放
                                if (uploadedImageURL) {
                                    URL.revokeObjectURL(uploadedImageURL);
                                }
                                uploadedImageURL = URL.createObjectURL(file);
                                // 销毁cropper后更改src属性再重新创建cropper
                                $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                                $inputImage.val('');
                            } else {
                                window.alert('请选择一个图像文件！');
                            }
                        }
                    });
                } else {
                    $inputImage.prop('disabled', true).addClass('disabled');
                }
            },
            crop: function () {
                var $image = $('#photo'); // 预览的<img >
                var $target = $('#result'); // 存放裁剪结果的<img >

                var canvas = $image.cropper('getCroppedCanvas', {
                    width: 300, // 裁剪后的长宽
                    height: 300
                });

                // 将裁剪后的图片预览显示
                canvas.toBlob(function (blob) {
                    $target.attr('src', URL.createObjectURL(blob));
                });

                // 得到裁剪后的图片base64 字符串(用于提交)
                this.base64 = canvas.toDataURL('image/png');
            },
        };
        new SchoolSetting();

    });
</script>
</body>
</html>